﻿
<div id="demo">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body collapse show">

                    <div class="row">
                        <div class="col-md-6"><button type="button" class="btn waves-effect waves-light btn-info" v-on:click="OpenMode"><i class="fa fa-plus"></i> 邀请</button></div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-lg-3 col-md-6 " v-for="x in UserList">
            <div class="card card-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <img class="card-img-top img-responsive" v-bind:src="x.TBA_HPHOTO==null?'../res/assets/images/users/2.jpg':x.TBA_HPHOTO" alt="用户头像">
                    </div>
                    <div class="col-md-8">
                        <h2 class="card-title">{{x.TBA_NAME}}</h2>
                        <p class="card-text"><i class="fa fa-envelope"></i>   {{x.TBA_EMAIL}}</p>
                        <p class="card-text"><i class="fa fa-phone"></i>   {{x.TBA_IPHONE}}</p>
                    </div>
                </div>
                <div class="row button-group m-t-10">
                    <div class="col-md-12">
                        <button type="button" class="btn waves-effect waves-light btn-block btn-success" v-if="x.TBU_STATE==1" v-on:click="SetState(x,0)">启用</button>
                        <button type="button" class="btn waves-effect waves-light btn-block btn-danger" v-if="x.TBU_STATE==0" v-on:click="SetState(x,1)">停用</button>
                    </div>
                </div>
                <img src="~/res/image/zf.png" style="position:absolute;top:0px; right:0px; width:100px" v-if="x.TBU_STATE==1" />
            </div>
        </div>

    </div>


    <div id="UserModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm ">           
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">邀请用户</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body">
                            <from class="form-horizontal">

                                <div class="form-group">
                                    <div class="col-md-12">
                                        <input type="email" id="InEmail" class="form-control" required="" placeholder="邮箱">
                                    </div>

                                    <div class="col-md-12 m-t-20">
                                        <div class="input-group">
                                            <input id="InCode" class="form-control" type="text" placeholder="验证码" required="" maxlength="4" disabled>
                                            <span class="input-group-btn">
                                                <button id="SendBt" class="btn waves-effect waves-light btn-success" v-on:click="SendMail" style="height: 38px;">
                                                    {{content}}
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </from>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn waves-effect waves-light btn-primary btn-info" v-on:click="saveData">确定</button>
                            <button type="button" class="btn waves-effect waves-light btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>

<script type="text/javascript">

    

    var vm = new Vue({
        el: "#demo",
        data: {
            UserList: [],
            LikeList: { TBU_NAME_LIKE: "", TBU_IPHONE_LIKE: "" },
            content: '发送验证码',
            totalTime: 60,
            canClick: true //添加canClick
        },
        mounted: function () {
            this.Query();
        },
        methods: {
            Query: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../Essential/UserOper?act=data", _self.LikeList,
                    function (data) {
                        data = JSON.parse(data);
                        for (var i = 0; i < data.data.length; i++) {
                            _self.UserList.push(data.data[i]);
                        }
                        $(".preloader").fadeOut();//取消加载等待
                    });
            },
            SendMail: function () {
                if ($("#InEmail").val() === "") {
                    swal("提示!", "请输入邮箱");
                    return;
                }
                $.post("../Essential/UserOper?act=SendMail", { EMail: $("#InEmail").val() },
                    function (data) {
                        data = JSON.parse(data);
                        if (data.status === 0) {
                            vm.countDown();
                            $("#InCode").focus();
                        } else if (data.status === 1) {
                            swal("提示!", "您邀请的用户未注册，系统已发送注册申请，请在对方注册后重新发送验证码");
                            return false;
                        } else if (data.status === 2) {
                            swal("发送失败!", data.message);
                            return false;
                        } else if (data.status === 3) {
                            swal("提示!", "该用户已存在您的企业中");
                            return false;
                        }
                    });
            },
            countDown: function () {
                if (!this.canClick) return  //改动的是这两行代码
                this.canClick = false;
                $("#SendBt").attr('disabled', true);
                $("#InCode").attr('disabled', false);
                this.content = this.totalTime + 's后重新发送'
                let clock = window.setInterval(() => {
                    this.totalTime--
                    this.content = this.totalTime + 's后重新发送'
                    if (this.totalTime < 0) {
                        window.clearInterval(clock)
                        this.content = '重新发送验证码'
                        this.totalTime = 10
                        this.canClick = true  //这里重新开启
                        $("#SendBt").attr('disabled', false);
                    }
                }, 1000)
            },
            SetState: function (moX, state) {
                var msgTitle = "停用";
                if (state === 0) {
                    msgTitle = "启用";
                }

                swal({
                    title: "确定" + msgTitle + "?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("../Essential/UserOper?act=state", { TBU_DID: moX.TBU_DID, TBU_STATE: state },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    moX.TBU_STATE = state;
                                    swal("操作成功!", "", "success");
                                } else {
                                    swal("系统错误!", data.message);
                                }
                            });
                    }
                });
            },
            OpenMode: function () {
                $('#UserModal').modal('toggle');
            },
            saveData: function () {
                if ($("#InEmail").val() === "") {
                    swal("提示!", "请输入邮箱");
                    return;
                }
                if ($("#InCode").val() === "") {
                    swal("提示!", "请输入验证码");
                    return;
                }
                $.post("../Essential/UserOper?act=save", { EMail: $("#InEmail").val(), CODE: $("#InCode").val() },
                    function (data) {
                        data = JSON.parse(data);
                        if (data.status === 0) {
                            swal("操作成功!", "", "success");
                            vm.Query();
                        } else if (data.status === 2) {
                            swal("系统错误!", "邮箱不存在");
                        } else if (data.status === 3) {
                            swal("系统错误!", "验证错误或已过期");
                        } else {
                            swal("系统错误!", data.message);
                        }
                    });
                $('#UserModal').modal('toggle');
            }
        }
    });
</script>
